// 配置路由相关信息

import Vue from 'vue'

// 1. 导入路由插件
import VueRouter from 'vue-router'

// 导入组件
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

// 懒加载写法
const About = () => import('../components/About.vue');
const User = () => import('../components/User.vue');

const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')
const Profile = () => import('../components/Profile.vue')

// 2. 通过Vue.use('插件') 安装插件
Vue.use(VueRouter);

// 配置路由与组件之间的应用关系
const routes = [
  {
    path: '',
    // redirect: 重定向
    redirect: '/home'
  },
  {
    name: '首页',
    path: '/home',
    // 路由懒加载
    component: () => import('../components/Home.vue'),
    children: [
      // 子路由
      {
        name: '新闻',
        path: 'news',
        component: HomeNews,
        beforeEnter: (to, from, next) => {
          // console.log("[beforeEnter] 进入新闻子路由");
          next();
        }
      },
      {
        name: '消息',
        path: 'message',
        component: HomeMessage
      }
    ],
  },
  {
    name: '关于',
    path: '/about',
    component: About
  },
  {
    name: '用户',
    // 动态路由
    path: '/user/:userId',
    component: User
  },
  {
    name: '我的',
    path: '/profile',
    component: Profile
  }
]

// 3. 安装完毕后, 需要创建一个路由对象
const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 4. 设置导航守卫
// [前置守卫] 在路由跳转之前触发

router.beforeEach((to, from, next) => {
  // from: 从哪个页面来
  // to:   要去哪个页面
  // next: 进行页面跳转
  document.title = to.name;
  // console.log("导航守卫你好");
  next();
})


// [后置钩子] 在路由跳珠之后触发
router.afterEach((to, from) => {
  // from : 从哪来[页面]
  // to   : 到哪去
  // console.log("[afterEach] 路由跳转完成");
})


export default router
